<template>
    <div class="content-right">
        <div style="padding-bottom: 10px;">
            <el-row :gutter="12" style="">
                <el-col :span="24">
                    <el-card shadow="hover">
                        <div slot="header">
                            <span>筛选</span>
                        </div>
                        时间:
                        <el-select v-model="value" placeholder="请选择">
                            <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                        区域:
                        <el-select v-model="value" placeholder="请选择" style="padding-right: 10px">
                            <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                        <el-button type="success" size="mini">导出</el-button>
                    </el-card>
                </el-col>
            </el-row>
        </div>

        <el-table
                :data="tableData"
                style="width: 100%;padding-left:10px"
                height="650px">
            <el-table-column
                    prop="name"
                    label="电表名称"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="1"
                    label="01:00"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="2"
                    label="02:00"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="3"
                    label="03:00"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="4"
                    label="04:00"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="5"
                    label="05:00"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="6"
                    label="06:00"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="7"
                    label="7:00"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="8"
                    label="08:00"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="9"
                    label="09:00"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="10"
                    label="10:00"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="11"
                    label="11:00"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="12"
                    label="12:00"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="13"
                    label="13:00"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="14"
                    label="14:00"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="15"
                    label="15:00"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="16"
                    label="16:00"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="17"
                    label="17:00"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="18"
                    label="18:00"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="19"
                    label="19:00"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="20"
                    label="20:00"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="21"
                    label="21:00"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="22"
                    label="22:00"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="23"
                    label="23:00"
                    width="80">
            </el-table-column>
        </el-table>


<!--        <div class="pagination">-->
<!--            <el-pagination-->
<!--                    background-->
<!--                    :current-page="1"-->
<!--                    :page-size="pagesize"-->
<!--                    :total="tableData.length"-->
<!--                    layout="prev, pager, next"-->
<!--                    @size-change="handleSizeChange"-->
<!--                    @current-change="handleCurrentChange"-->
<!--            />-->
<!--        </div>-->


    </div>

</template>

<script>
    import ListPage from './list'

    export default {
        components: {
            ListPage
        },
        data() {
            return {
                tableData: [{
                    name: 'A1-电表1',
                    1: 36,
                    2:36,
                    3:36,
                    4:36,
                    5:36,
                    6:36,
                    7:36,
                    8:36,
                    9:36,
                    10:36,
                    11:36,
                    12:36,
                    13:36,
                    14:36,
                    15:36,
                    16:36,
                    17:36,
                    18:36,
                    19:36,
                    20:36,
                    21:36,
                    22:36,
                    23:36,
                },{
                    name: 'A1-电表1',
                    1: 36,
                    2:36,
                    3:36,
                    4:36,
                    5:36,
                    6:36,
                    7:36,
                    8:36,
                    9:36,
                    10:36,
                    11:36,
                    12:36,
                    13:36,
                    14:36,
                    15:36,
                    16:36,
                    17:36,
                    18:36,
                    19:36,
                    20:36,
                    21:36,
                    22:36,
                    23:36,
                },{
                    name: 'A1-电表1',
                    1: 36,
                    2:36,
                    3:36,
                    4:36,
                    5:36,
                    6:36,
                    7:36,
                    8:36,
                    9:36,
                    10:36,
                    11:36,
                    12:36,
                    13:36,
                    14:36,
                    15:36,
                    16:36,
                    17:36,
                    18:36,
                    19:36,
                    20:36,
                    21:36,
                    22:36,
                    23:36,
                },{
                    name: 'A1-电表1',
                    1: 36,
                    2:36,
                    3:36,
                    4:36,
                    5:36,
                    6:36,
                    7:36,
                    8:36,
                    9:36,
                    10:36,
                    11:36,
                    12:36,
                    13:36,
                    14:36,
                    15:36,
                    16:36,
                    17:36,
                    18:36,
                    19:36,
                    20:36,
                    21:36,
                    22:36,
                    23:36,
                },{
                    name: 'A1-电表1',
                    1: 36,
                    2:36,
                    3:36,
                    4:36,
                    5:36,
                    6:36,
                    7:36,
                    8:36,
                    9:36,
                    10:36,
                    11:36,
                    12:36,
                    13:36,
                    14:36,
                    15:36,
                    16:36,
                    17:36,
                    18:36,
                    19:36,
                    20:36,
                    21:36,
                    22:36,
                    23:36,
                },{
                    name: 'A1-电表1',
                    1: 36,
                    2:36,
                    3:36,
                    4:36,
                    5:36,
                    6:36,
                    7:36,
                    8:36,
                    9:36,
                    10:36,
                    11:36,
                    12:36,
                    13:36,
                    14:36,
                    15:36,
                    16:36,
                    17:36,
                    18:36,
                    19:36,
                    20:36,
                    21:36,
                    22:36,
                    23:36,
                },{
                    name: 'A1-电表1',
                    1: 36,
                    2:36,
                    3:36,
                    4:36,
                    5:36,
                    6:36,
                    7:36,
                    8:36,
                    9:36,
                    10:36,
                    11:36,
                    12:36,
                    13:36,
                    14:36,
                    15:36,
                    16:36,
                    17:36,
                    18:36,
                    19:36,
                    20:36,
                    21:36,
                    22:36,
                    23:36,
                },{
                    name: 'A1-电表1',
                    1: 36,
                    2:36,
                    3:36,
                    4:36,
                    5:36,
                    6:36,
                    7:36,
                    8:36,
                    9:36,
                    10:36,
                    11:36,
                    12:36,
                    13:36,
                    14:36,
                    15:36,
                    16:36,
                    17:36,
                    18:36,
                    19:36,
                    20:36,
                    21:36,
                    22:36,
                    23:36,
                },{
                    name: 'A1-电表1',
                    1: 36,
                    2:36,
                    3:36,
                    4:36,
                    5:36,
                    6:36,
                    7:36,
                    8:36,
                    9:36,
                    10:36,
                    11:36,
                    12:36,
                    13:36,
                    14:36,
                    15:36,
                    16:36,
                    17:36,
                    18:36,
                    19:36,
                    20:36,
                    21:36,
                    22:36,
                    23:36,
                },{
                    name: 'A1-电表1',
                    1: 36,
                    2:36,
                    3:36,
                    4:36,
                    5:36,
                    6:36,
                    7:36,
                    8:36,
                    9:36,
                    10:36,
                    11:36,
                    12:36,
                    13:36,
                    14:36,
                    15:36,
                    16:36,
                    17:36,
                    18:36,
                    19:36,
                    20:36,
                    21:36,
                    22:36,
                    23:36,
                },{
                    name: 'A1-电表1',
                    1: 36,
                    2:36,
                    3:36,
                    4:36,
                    5:36,
                    6:36,
                    7:36,
                    8:36,
                    9:36,
                    10:36,
                    11:36,
                    12:36,
                    13:36,
                    14:36,
                    15:36,
                    16:36,
                    17:36,
                    18:36,
                    19:36,
                    20:36,
                    21:36,
                    22:36,
                    23:36,
                },{
                    name: 'A1-电表1',
                    1: 36,
                    2:36,
                    3:36,
                    4:36,
                    5:36,
                    6:36,
                    7:36,
                    8:36,
                    9:36,
                    10:36,
                    11:36,
                    12:36,
                    13:36,
                    14:36,
                    15:36,
                    16:36,
                    17:36,
                    18:36,
                    19:36,
                    20:36,
                    21:36,
                    22:36,
                    23:36,
                },{
                    name: 'A1-电表1',
                    1: 36,
                    2:36,
                    3:36,
                    4:36,
                    5:36,
                    6:36,
                    7:36,
                    8:36,
                    9:36,
                    10:36,
                    11:36,
                    12:36,
                    13:36,
                    14:36,
                    15:36,
                    16:36,
                    17:36,
                    18:36,
                    19:36,
                    20:36,
                    21:36,
                    22:36,
                    23:36,
                },{
                    name: 'A1-电表1',
                    1: 36,
                    2:36,
                    3:36,
                    4:36,
                    5:36,
                    6:36,
                    7:36,
                    8:36,
                    9:36,
                    10:36,
                    11:36,
                    12:36,
                    13:36,
                    14:36,
                    15:36,
                    16:36,
                    17:36,
                    18:36,
                    19:36,
                    20:36,
                    21:36,
                    22:36,
                    23:36,
                },{
                    name: 'A1-电表1',
                    1: 36,
                    2:36,
                    3:36,
                    4:36,
                    5:36,
                    6:36,
                    7:36,
                    8:36,
                    9:36,
                    10:36,
                    11:36,
                    12:36,
                    13:36,
                    14:36,
                    15:36,
                    16:36,
                    17:36,
                    18:36,
                    19:36,
                    20:36,
                    21:36,
                    22:36,
                    23:36,
                },{
                    name: 'A1-电表1',
                    1: 36,
                    2:36,
                    3:36,
                    4:36,
                    5:36,
                    6:36,
                    7:36,
                    8:36,
                    9:36,
                    10:36,
                    11:36,
                    12:36,
                    13:36,
                    14:36,
                    15:36,
                    16:36,
                    17:36,
                    18:36,
                    19:36,
                    20:36,
                    21:36,
                    22:36,
                    23:36,
                },

                ],
                editVisible: false,
                showVisible: false,
                form: {}
            }
        },
        methods: {
            // 编辑操作
            handleEdit(index, row) {
                this.idx = index
                this.form = row
                this.editVisible = true
            },
            // 保存编辑
            saveEdit() {
                this.editVisible = false
                this.$message.success(`修改第 ${this.idx + 1} 行成功`)
                this.$set(this.tableData, this.idx, this.form)
            },
            // 查看操作
            handleClick(index, row) {
                this.idx = index
                this.form = row
                this.showVisible = true
            },
            // 删除
            deleteRow(index, rows) {
                this.open(index, rows)
            },
            open(index, rows) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    rows.splice(index, 1)
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
            }
        }
    }
</script>
<style lang="scss" scoped>
    .content-right {
        width: 98%;
        height: 96%;
        border-radius: 4px;
        background-color: #FFFFFF;
        box-shadow: 0px 0px 8px 0px #ccc;
        overflow: hidden;

        .info-top {
            width: 100%;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: left;
            border-left: 8px solid #40e0ff;
            border-radius: 8px 8px 0 0;
            background: #f9f9f9;

            span {
                margin-left: .625rem;
                font-size: 1rem;
                color: #333;
            }
        }

        .contentBox {
            width: 98%;
            height: auto;
            margin: 0 auto;
            position: relative;

            .content-top {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                margin: 1.25rem 0;

                .left {
                    display: flex;

                    .text {
                        border: 1px solid rgba(43, 159, 246, 1);
                        padding: .3125rem;
                        font-size: 13px;
                        font-weight: 400;
                        color: rgba(51, 51, 51, 1);
                        letter-spacing: 1px;
                        margin-right: 1.25rem;

                        span {
                            color: #2B9FF6;
                        }
                    }
                }

            }
        }

    }
</style>
<style>
    .contentBox .el-select .el-input.is-focus .el-input__inner {
        border-color: #ccc !important;
    }

    .contentBox .el-select .el-input__inner:focus {
        border-color: #ccc !important;
    }

    .contentBox .bnt-box .el-select {
        width: 100% !important;
    }
</style>
